<template>
	<view class="content">
		<u-swiper :list="list" style="height: 320rpx;"></u-swiper>
		<view class="box">
			<view class="pary">
				<view class="pary-item" @click="paryRadio(1)">
					<view class="pary-item-box" :class="{'pary-item-box-active': form.type==1}">
						<view class="pary-title" :class="{'pary-title-active': form.type==1}">
							大愿供养
						</view>
						<view class="pary-img">
							<u--image :showLoading="true" :src="imgPath + 'storage/home/pary1.png'" width="140rpx"
								height="272rpx"></u--image>
						</view>
					</view>
					<view class="pary-item-active">
						<view :class="{active: form.type==1}"></view>
					</view>
				</view>
				<view class="pary-item" @click="paryRadio(2)">
					<view class="pary-item-box" :class="{'pary-item-box-active': form.type==2}">
						<view class="pary-title" :class="{'pary-title-active': form.type==2}">
							寺庙商品
						</view>
						<view class="pary-img">
							<u--image :showLoading="true" :src="imgPath + 'storage/home/pary2.png'" width="140rpx"
								height="272rpx"></u--image>
						</view>
					</view>
					<view class="pary-item-active">
						<view :class="{active: form.type==2}"></view>
					</view>
				</view>
				<view class="pary-item" @click="paryRadio(3)">
					<view class="pary-item-box" :class="{'pary-item-box-active': form.type==3}">
						<view class="pary-title" :class="{'pary-title-active': form.type==3}">
							阖家商品
						</view>
						<view class="pary-img">
							<u--image :showLoading="true" :src="imgPath + 'storage/home/pary3.png'" width="140rpx"
								height="272rpx"></u--image>
						</view>
					</view>
					<view class="pary-item-active">
						<view :class="{active: form.type==3}"></view>
					</view>
				</view>
				<view class="pary-item" @click="paryRadio(4)">
					<view class="pary-item-box" :class="{'pary-item-box-active': form.type==4}">
						<view class="pary-title" :class="{'pary-title-active': form.type==4}">
							还愿商品
						</view>
						<view class="pary-img">
							<u--image :showLoading="true" :src="imgPath + 'storage/home/pary4.png'" width="140rpx"
								height="272rpx"></u--image>
						</view>
					</view>
					<view class="pary-item-active">
						<view :class="{active: form.type==4}"></view>
					</view>
				</view>
			</view>
			<view class="information">
				<view class="information-item">
					<view class="information-label">
						*金额
					</view>
					<view class="information-input">
						<input type="text" placeholder="请输入金额" v-model="price" @input="inputNumber" :maxlength="10" />
						<view class="information-text">
							最小金额0.10元
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-label">
						*心愿类别
					</view>
					<view class="information-select" @click="paryWishShow=true">
						<view class="select-text">
							{{form.category ? form.category : '请选择心愿类别'}}
						</view>
						<view class="select-icon">
							<u-icon name="arrow-right" color="#8d8d8d" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-label">
						*心愿
					</view>
					<view class="information-select" @click="wishTypeShow=true">
						<view class="select-text">
							{{form.wish_name ? form.wish_name : '请选择心愿'}}
						</view>
						<view class="select-icon">
							<u-icon name="arrow-right" color="#8d8d8d" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-label">
						*商品时间
					</view>
					<view class="information-time">
						<view class="time" v-for="item in praysettingList"
							:class="{'time-active':form.lamp_time==item.day_num}"
							@click="radioTime(item.day_num,item.amount)">
							{{item.day_num}}天
						</view>
						<!-- <view class="time" :class="{'time-active':form.lamp_time==5}" @click="radioTime(5)">
							5天
						</view>
						<view class="time" :class="{'time-active':form.lamp_time==10}" @click="radioTime(10)">
							10天
						</view>
						<view class="time" :class="{'time-active':form.lamp_time==30}" @click="radioTime(30)">
							30天
						</view> -->
					</view>
				</view>
				<view class="usertitle">
					功德主信息
				</view>
				<view class="information-name">
					<view class="name">
						<text class="name-name">*功德主姓名</text>
						<text class="name-text">（最多四字）</text>
					</view>
					<view class="anonymouscheck">
						<checkbox-group @change="isAnonymous">
							<label>
								<text>匿名商品</text>
								<checkbox value="cb" :checked="false" color="#FFCC33" style="transform:scale(0.7)" />
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="name-input">
					<input type="text" placeholder="请输入功德主姓名1" v-model="name1" :maxlength="8" />
				</view>
				<view class="name-input">
					<input type="text" placeholder="请输入功德主姓名2" v-model="name2" :maxlength="8" />
				</view>
				<view class="showdetails" v-if="detailstype" @click="showdetail">
					<text>展开详细资料</text>
					<u-icon name="arrow-down-fill" color="#EC9665" size="16"></u-icon>
				</view>
				<view class="showdetails" v-else @click="showdetail">
					<text>收起详细资料</text>
					<u-icon name="arrow-up-fill" color="#EC9665" size="16"></u-icon>
				</view>
				<view v-show="!detailstype">
					<view class="information-item">
						<view class="information-label">
							联系电话
						</view>
						<view class="information-input1">
							<input type="number" placeholder="请输入联系电话" v-model="form.mobile" @input="inputPhone()"
								:maxlength="11" />
						</view>
					</view>
					<view class="information-item">
						<view class="information-label1">
							性别
						</view>
						<view class="information-select" @click="sexShow=true">
							<view class="select-text">
								{{form.sex?form.sex:'请选择性别'}}
							</view>
							<view class="select-icon">
								<u-icon name="arrow-right" color="#8d8d8d" size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="information-item">
						<view class="information-label1">
							生辰
						</view>
						<view class="information-select" @click="dateShow=true">
							<view class="select-text">
								{{form.birthdate?form.birthdate:'请选择生辰'}}
							</view>
							<view class="select-icon">
								<u-icon name="arrow-right" color="#8d8d8d" size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="information-item">
						<view class="information-label1">
							地址
						</view>
						<view class="information-input1">
							<input type="number" placeholder="请输入地址" v-model="form.address" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="wishTypeShow" :columns="wishTypeColumns" keyName="name" @cancel="wishTypeShow=false"
			@confirm="confirmWishType"></u-picker>
		<u-picker :show="paryWishShow" :columns="paryWishColumns" keyName="name" @cancel="paryWishShow=false"
			@confirm="confirmParyWish"></u-picker>
		<u-picker :show="sexShow" :columns="sexColumns" @cancel="sexShow=false" @confirm="confirmSex"></u-picker>
		<u-datetime-picker :show="dateShow" v-model="form.birthdate" mode="date" @cancel="dateShow=false"
			@confirm="confirmDate"></u-datetime-picker>
		<view class="submit">
			<view class="submit-left">
				合计：¥{{form.price ||0}}
			</view>
			<view class="submit-right" @click="submitOK">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				imgPath: this.$store.state.user.baseURL,
				totalIds: 1,
				form: {
					remark: '',
					order_type: 1,
					lamp_time: '',
					lotus_lamp_ids: '',
					temple_id: '',
					type: 1,
					category: '',
					wish_name: '',
					wish_name: '',
					is_anonymity: 0,
					name: '',
					price: '',
					mobile: '',
					sex: '',
					birthdate: '',
					address: '',
				},
				name1: '',
				name2: '',
				list: [],
				praysettingList: [],
				type: 1,
				timeType: 1,
				show: false,
				sexShow: false,
				dateShow: false,
				wishTypeShow: false,
				paryWishShow: false,
				detailstype: true,
				sexColumns: [
					['男', '女']
				],
				wishTypeColumns: [],
				paryWishColumns: [],
				price: '',
				amount: '',
				order_id: '',
				minisystemInfo: ''
			}
		},
		onShareAppMessage(e) {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let currentPage = routes[routes.length - 1].route;
			let shareobj = {
				title: this.minisystemInfo.sub_title, //分享的标题
				path: currentPage + '?temple_id=' + this.form.temple_id + '&lotus_lamp_ids=' + this.form
					.lotus_lamp_ids, //好友点击分享之后跳转的页面
				imageUrl: this.minisystemInfo.url, //内容图片
			}
			return shareobj //一定要返回对象
		},
		onLoad(e) {
			uni.getStorage({
				key: 'minisystemInfo',
				success: (res) => {
					this.minisystemInfo = res.data
				}
			})
			this.getBanner()
			this.getLightsupplyList()
			this.getLightsupplyCatelist()
			this.getPraysettingList()
			this.form.temple_id = e.temple_id
			this.form.lotus_lamp_ids = e.lotus_lamp_ids
			if (e.lotus_lamp_ids) {
				this.totalIds = this.form.lotus_lamp_ids.split(',').length
			}
		},
		methods: {
			paryRadio(type) {
				this.form.type = type
			},
			radioTime(type, amount) {
				this.form.lamp_time = type
				this.amount = amount
				this.form.price = this.totalIds * (parseFloat(this.amount) || 0) + (
					parseFloat(
						this.price) || 0)
			},
			cancelpicker() {
				this.show = false
			},
			confirmpicker(e) {
				console.log(e);
				this.show = false
			},
			showdetail() {
				this.detailstype = !this.detailstype
			},
			getBanner() {
				this.$api.banner({
					type: 2
				}).then(res => {
					console.log(res);
					this.list = res.data.list.map(item => item.img_url)
				})
			},
			getLightsupplyList() {
				this.$api.lightsupplylist().then(res => {
					console.log(res);
					this.wishTypeColumns = [res.data.list]
				})
			},
			getLightsupplyCatelist() {
				this.$api.lightsupplycatelist().then(res => {
					console.log(res);
					this.paryWishColumns = [res.data.list]
				})
			},
			confirmWishType(e) {
				console.log(e.value[0]);
				this.form.wish_name = e.value[0].name
				this.wishTypeShow = false
			},
			confirmParyWish(e) {
				console.log(e.value[0]);
				this.form.category = e.value[0].name
				this.paryWishShow = false
			},
			confirmSex(e) {
				console.log(e.value[0]);
				this.form.sex = e.value[0]
				this.sexShow = false
			},
			confirmDate(e) {
				const date = new Date(e.value)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				setTimeout(() => {
					this.form.birthdate = (year + '-' + month + '-' + day)
				}, 10)

				console.log(year + '-' + month + '-' + day);
				this.dateShow = false
			},
			isAnonymous(e) {
				this.form.is_anonymity = e.detail.value.length
				console.log(this.form.is_anonymity);
			},
			inputNumber() {
				setTimeout(() => {
					// this.price = this.price.replace(/^d*(?:.d{0,2})?$/, "")

					this.price = this.price.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
					this.price = this.price.replace(/^\./g, ""); //验证第一个字符是数字而不是字符
					this.price = this.price.replace(/\.{2,}/g, "."); //只保留第一个.清除多余的
					this.price = this.price.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
					this.price = this.price.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数

					this.form.price = (parseFloat(this.amount) || 0) + (parseFloat(this.price) || 0)
				}, 10)
			},
			inputPhone() {
				setTimeout(() => {
					this.form.mobile = this.form.mobile.replace(/[^\d]/g, "")
				}, 10)
			},
			getPraysettingList() {
				this.$api.praysettinglist().then(res => {
					console.log(res);
					this.praysettingList = res.data.list
				})
			},
			submitOK() {
				if (this.name1 != '' && this.name2 != '') {
					this.form.name = this.name1 + ',' + this.name2
				} else if (this.name1 != '') {
					this.form.name = this.name1
				} else if (this.name2 != '') {
					this.form.name = this.name2
				}
				if (this.name1 == '' && this.name2 == '' && this.form.is_anonymity == 0) {
					uni.showToast({
						title: '功德主姓名为空',
						icon: 'none'
					})
					return
				}
				// if(this.order_id) {
				//  pay(this.order_id,1,2)
				//  return
				// }
				this.$api.blessingordercreate(this.form).then(res => {
					// this.order_id = res.data.id
					// pay(res.data.id,1)
					uni.navigateTo({
						url: '/subpackageA/paryorders/paryorderdetail?id=' + res.data.id
					})
				})
			},
			updata() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		// height: 100%;
		background-color: #6A2D0A;
	}

	.box {
		padding: 0 30rpx;
		padding-bottom: 124rpx;
		transform: translateY(-60rpx);
	}

	.pary {
		box-sizing: border-box;
		width: 690rpx;
		height: 400rpx;
		background: #FEF1DC;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 16rpx 0 16rpx;

		.pary-item {
			.pary-item-box-active {
				border: 2rpx solid #6A2D0A !important;
			}

			.pary-item-box {
				width: 156rpx;
				height: 330rpx;
				border: 2rpx solid transparent;

				.pary-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #6a625e;
					line-height: 42rpx;
					text-align: center;
					font-style: normal;
				}

				.pary-img {
					display: flex;
					justify-content: center;
					align-content: end;
				}

				.pary-title-active {
					color: #6A2D0A !important;
				}
			}

			.pary-item-active {
				padding-top: 16rpx;
				display: flex;
				justify-content: center;

				.active {
					width: 60rpx;
					height: 8rpx;
					background: #6A2D0A;
					border-radius: 4rpx;
				}
			}
		}
	}

	.information {
		padding-top: 60rpx;

		.information-item {
			display: flex;
			padding-bottom: 30rpx;

			.information-label {
				width: 134rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: left;
				font-style: normal;
				padding-right: 16rpx;
			}

			.information-select {
				height: 70rpx;
				flex: 1;
				background: #FFFFFF;
				border-radius: 42rpx;
				padding: 0 38rpx;
				display: flex;
				justify-content: space-between;

				.select-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #AAAAAA;
					line-height: 70rpx;
					text-align: left;
					font-style: normal;
					overflow: hidden;
				}

				.select-icon {
					display: flex;
					align-items: center;
				}
			}

			.information-time {
				height: 70rpx;
				flex: 1;
				display: flex;
				justify-content: space-between;

				.time {
					width: 124rpx;
					height: 70rpx;
					background: #FEF1DC;
					border-radius: 42rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #6A2D0A;
					line-height: 70rpx;
					text-align: center;
					font-style: normal;
					border: 2rpx solid transparent;
				}

				.time-active {
					background: linear-gradient(90deg, #D16325 0%, #F4A578 100%) !important;
					border-radius: 35rpx !important;
					border: 2rpx solid rgba(254, 241, 220, 0.5) !important;
					color: #FFFFFF;
				}
			}

			.information-input1 {
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 42rpx;
				display: flex;
				align-items: center;
				padding: 0 38rpx;
				flex: 1;

				input {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #AAAAAA;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.information-label1 {
				padding-right: 75rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: left;
				font-style: normal;
			}

			.information-input {
				height: 70rpx;
				flex: 1;
				background: #FFFFFF;
				border-radius: 42rpx;
				display: flex;
				align-items: center;
				padding: 0 38rpx;
				justify-content: space-between;

				input {
					width: 200rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #AAAAAA;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}



				.information-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #EC9665;
					line-height: 34rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}

		.usertitle {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			padding-bottom: 46rpx;
		}

		.information-name {
			display: flex;
			justify-content: space-between;

			.name {
				.name-name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.name-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #EC9665;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.anonymouscheck {
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.name-input {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 30rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 42rpx;

		input {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #AAAAAA;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			padding: 0 30rpx;
		}
	}

	.showdetails {
		padding-top: 36rpx;
		padding-bottom: 36rpx;
		display: flex;
		justify-content: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #EC9665;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;

		text {
			padding-right: 16rpx;
		}
	}

	.submit {
		box-sizing: border-box;
		width: 100%;
		height: 124rpx;
		background: #FEF1DC;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;

		.submit-left {
			width: 400rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #6A2D0A;
			line-height: 84rpx;
			text-align: left;
			font-style: normal;
			overflow: hidden;
		}

		.submit-right {
			width: 440rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
			border-radius: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>